<template>
    <div class="detail">
        <!-- {{$route.query.orderNo}} -->
        <h1>
            {{$route.meta.title}}
        </h1>
        <div class="main">
            <table>
                <tr>
                    <td>订单号:</td>
                    <td>
                        <p>{{list.orderNo}}</p>
                    </td>
                </tr>
                <tr>
                    <td>创建时间:</td>
                    <td>
                        <p>{{list.createTime}}</p>
                    </td>
                </tr>
                <tr>
                    <td>收件人:</td>
                    <td>
                        <p>{{list.receiverName}}</p>
                    </td>
                </tr>
                <tr>
                    <td>订单状态:</td>
                    <td>
                        <p>{{list.statusDesc}}</p>
                    </td>
                </tr>
                <tr>
                    <td>支付方式:</td>
                    <td>
                        <p>{{list.paymentTypeDesc}}</p>
                    </td>
                </tr>
                <tr>
                    <td>订单金额:</td>
                    <td>
                        <p>￥{{list.payment}}</p>
                    </td>
                </tr>
            </table>
        </div>
        <el-table :data="tableData" border style="width: 100%">
            <el-table-column label="商品图片">
                <template slot-scope="scope">
                    <el-image :src="'http://img.happymmall.com/'+scope.row.productImage"></el-image>
                </template>
            </el-table-column>
            <el-table-column prop="productName" label="商品信息">
            </el-table-column>
            <el-table-column label="单价">
                <template slot-scope="scope">
                    ￥{{scope.row.currentUnitPrice}}
                </template>
            </el-table-column>
            <el-table-column prop="quantity" label="数量">
            </el-table-column>
            <el-table-column prop="totalPrice" label="合计">
                <template slot-scope="scope">
                    ￥{{scope.row.totalPrice}}
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
import { getOrderDetail } from "@/utils/api";
export default {
    data() {
        return {
            list: {},
            tableData: [],
        };
    },
    created() {
        getOrderDetail(this.$route.query.orderNo).then((res) => {
            this.list = res.data.data;
            this.tableData = res.data.data.orderItemVoList;
        });
    },
};
</script>

<style lang="scss" scoped>
h1 {
    font-weight: normal;
}
.detail {
    width: 100%;
    height: 100%;
    .main {
        table {
            width: 500px;
            margin: auto;
            td:nth-child(1) {
                width: 15%;
                font-weight: bold;
                text-align: right;
            }
            p {
                line-height: 40px;
                background-color: #fff;
                text-indent: 1em;
                margin: 5px 10px;
            }
        }
    }
    /deep/ {
        .el-table {
            margin-top: 30px;
            img {
                width: 80px;
                height: auto;
            }
        }
    }
}
</style>